<!-- 登录模块 -->
<template>
  <div class="login">
    <!-- 登录模块header部分开始 -->
    <div class="login-header">
      <div class="login-header__help">{{ $t("helpCenter") }}</div>
      <div class="login-header__lang">
        <div class="lang__text" @click="showLangList = !showLangList">
          {{ langText }}
        </div>
        <div class="lang-list" v-show="showLangList">
          <div class="lang-list__item" @click="changeLang('cs')">简体中文</div>
          <div class="lang-list__item" @click="changeLang('tc')">繁体中文</div>
          <div class="lang-list__item" @click="changeLang('en')">English</div>
        </div>
      </div>
    </div>
    <!-- 登录模块header部分结束 -->
    <!-- 登陆模块主体部分开始 -->
    <div class="login-body">
      <div class="login-body-header">
        <div class="body-header__logo"></div>
        <div class="body-header__slogan">{{ $t("slogan") }}</div>
      </div>
      <!-- 登陆盒子开始 -->
      <div class="login-body-box">
        <div class="body-box-wrapper">
          <div class="box-wrapper-tabs">
            <div
              :class="['wrapper-tabs-item', { active: activeTab === 'msg' }]"
              @click="activeTab = 'msg'"
            >
              <span>{{ $t("login.msg") }}</span>
            </div>
            <div
              :class="['wrapper-tabs-item', { active: activeTab === 'pass' }]"
              @click="activeTab = 'pass'"
            >
              <span>{{ $t("login.pass") }}</span>
            </div>
          </div>
          <div class="box-wrapper-content">
            <div v-if="activeTab === 'pass'">
              <div class="login-form">
                <div class="login-form-item">
                  <input
                    type="text"
                    :placeholder="$t('login.p_phone')"
                    @input="handlePhoneChange"
                  />
                </div>
                <div class="login-form-item">
                  <input
                    type="text"
                    :placeholder="$t('login.p_pass')"
                    @input="handlePassChange"
                  />
                </div>
                <div v-if="showError" class="login-form-error">
                  帐号或密码错误,请重新输入 (1012101)
                </div>
                <div v-if="!showLoginBtn" class="login-form-btn--disable">
                  {{ $t("login.loginText") }}
                </div>
                <div
                  v-else
                  class="login-form-btn--able"
                  @click.stop="handleSubmit"
                >
                  {{ $t("login.loginText") }}
                </div>
              </div>
            </div>
            <div v-else></div>
          </div>
        </div>
      </div>
      <!-- 登陆盒子结束 -->
    </div>
    <!-- 登陆模块主体部分结束 -->
    <!-- 登陆模块底部部分开始 -->
    <div class="footer_wrapper__gbtyuw">
      <div class="base_footer_link__3rxyoz">
        <span>{{ $t("login.policy") }}</span>
      </div>
      <p class="footer_copyright__3blxo0">
        <span></span>{{ $t("login.backup")
        }}<span>{{ $t("login.contact") }}</span>
      </p>
    </div>
    <!-- 登陆模块底部部分结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  mapState,
  mapGetters,
  mapActions,
  createNamespacedHelpers,
} from "vuex";
let loginNS = createNamespacedHelpers("login");
console.log(loginNS);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      showLangList: false, // 用来显示语言列表
      // count: 1,
      activeTab: "pass", //pass
      username: "",
      password: "",
      showError: false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    showLoginBtn: function () {
      if (!!this.username && !!this.password) {
        return true;
      } else {
        return false;
      }
    },
    ...loginNS.mapState(["lang"]), // this.$store.state.login.lang
    ...mapState(["count"]),
    ...mapGetters(["totalPrice"]),
    langText: function () {
      // console.log(this.$i18n.locale)
      let text = "";
      switch (this.$i18n.locale) {
        case "tc":
          text = "繁体中文";
          break;
        case "en":
          text = "English";
          break;
        case "cs":
          text = "简体中文";
          break;
        default:
          text = "简体中文";
          break;
      }
      return text;
    },
  },
  // computed: mapState(['count']),
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSubmit: function () {
      // 登录请求 发送
      this.$axios
        .post("/user/login", {
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          console.log(res);
          // 如果登录成功，
          // 1. 跳转到我的页面中
          // 2. token 存到 vuex 中，方便其它页面或者组件需要的时候，可以从 vuex 中获取
          if (res.code == 1) {
          } else {
            this.showError = true;
          }
        });
    },
    handlePassChange: function (e) {
      this.password = e.target.value;
    },
    handlePhoneChange: function (e) {
      console.log(e.target.value);
      this.username = e.target.value;
    },
    // this.increaseSync(payload) => this.$store.dispatch('increaseSync',payload)
    ...mapActions(["increaseSync"]),
    handleAdd: function () {
      // this.$store.state.count++
      console.log(this.$store);
      // this.$store.dispatch(type,payload)
      // this.$store.dispatch('increaseSync', {
      // 	num: 1,
      // })
      this.increaseSync({ num: 1 });
    },
    changeLang: function (lang) {
      // 隐藏语言选择的菜单
      this.showLangList = false;
      // 设置语言
      this.$i18n.locale = lang; // cs tc en
      // 修改存到仓库 login 模块中  lang中
      this.$store.dispatch("login/changeLang", {
        lang,
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(this.$store.state.count)
    // console.log(this.$store.state.login.lang)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.login {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  .login-header {
    height: 1.38889rem;
    padding: 0 0.66667rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .login-header__help {
      color: #7f7f7f;
      font-size: 0.38889rem;
      margin-left: 0.75rem;
      cursor: pointer;
      transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
    }

    .login-header__lang {
      position: relative;
      margin-left: 0.75rem;
      .lang__text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        color: #7f7f7f;
        font-size: 0.38889rem;
        cursor: pointer;
        transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
        &::after {
          content: "";
          height: 0;
          width: 0;
          border: 0.13889rem solid transparent;
          border-top-color: #7f7f7f;
          margin-left: 0.27778rem;
          margin-bottom: -0.05556rem;
          display: inline-block;
        }
      }
      .lang-list {
        position: absolute;
        background: #fff;
        border-radius: 0.13889rem;
        box-shadow: 0 0 0.13889rem #d3d3d3;
        right: 0;
        top: 0.88889rem;
        width: 3.05556rem;
        z-index: 10;
        .lang-list__item {
          height: 1.11111rem;
          padding: 0.13889rem 0.55556rem;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-pack: center;
          justify-content: center;
          -ms-flex-direction: row;
          flex-direction: row;
          white-space: nowrap;
          color: #7f7f7f;
          font-size: 0.38889rem;
          cursor: pointer;
          transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
        }
      }
    }
  }
  .login-body {
    flex: 1;
    .login-body-header {
      padding-bottom: 1.36111rem;
      margin-bottom: -82px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-direction: column;
      flex-direction: column;
      padding-top: 0.55556rem;
      padding-bottom: 0.83333rem;
      margin-bottom: 0;
      .body-header__logo {
        width: 4.25rem;
        height: 0.69444rem;
        margin-bottom: 0.41667rem;
        background-image: url();
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 100% 100%;
      }

      .body-header__slogan {
        font-size: 0.33333rem;
        font-weight: 500;
        padding: 0 0.66667rem;
        text-align: center;
      }
    }
    .login-body-box {
      margin: 0 auto;
      .body-box-wrapper {
        position: relative;
        padding: 0.55556rem 0.66667rem 0.66667rem;
        .box-wrapper-tabs {
          margin-bottom: 0.88889rem;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-pack: center;
          justify-content: center;
          -ms-flex-direction: row;
          flex-direction: row;
          margin-bottom: 20px;
          overflow: hidden;
          .active {
            color: #000 !important;
          }
          .wrapper-tabs-item {
            position: relative;
            height: 0.77778rem;
            padding: 0 0.27778rem;
            flex: 1 1;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
            height: 34px;
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
            padding: 0 10px;
            color: rgba(0, 0, 0, 0.5);
            &:first-child::after {
              content: "";
              height: 0.33333rem;
              border-right: 1px solid rgba(0, 0, 0, 0.1);
              position: absolute;
              right: 0;
              top: 50%;
              -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
            }
            span {
              line-height: 0.77778rem;
              font-size: 0.44444rem;
            }
          }
        }
        .box-wrapper-content {
          .login-form {
            .login-form-item {
              width: 100%;
              height: 45px;
              background: #f7f7f7;
              border-radius: 9px;
              input {
                outline: none;
                border: none;
                background-color: #f7f7f7;
                border-radius: 0.19444rem;
                height: 1.22222rem;
                padding: 0.27778rem 0.41667rem;
                font-size: 0.38889rem;
                line-height: 0.66667rem;
                width: 100%;
              }
              margin-bottom: 0.1rem;
            }
            .login-form-error {
              color: #ec5b66;
              font-size: 0.33333rem;
              padding: 0.55556rem 0 0;
              margin-bottom: -0.33333rem;
              text-align: center;
            }
            .login-form-btn--able {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0.75rem auto 0;
              background-color: #ff4466;
              color: white;
              border-radius: 0.27778rem;
              font-size: 0.38889rem;
              height: 1.22222rem;
            }
            .login-form-btn--disable {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0.75rem auto 0;
              background-color: #f89cb4;
              color: white;
              border-radius: 0.27778rem;
              font-size: 0.38889rem;
              height: 1.22222rem;
            }
          }
        }
      }
    }
  }

  .footer_wrapper__gbtyuw {
    padding: 0.83333rem 0.66667rem;
    padding: 20px;
    text-align: center;
    color: #9b9b9b;
    font-size: 0.33333rem;
    .base_footer_link__3rxyoz {
      font-size: 0.38889rem;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-direction: row;
      flex-direction: row;
      color: #5a6e97;
      margin: 0 0 0.27778rem;
      span {
      }
    }

    .footer_copyright__3blxo0 {
      padding: 20px;
      text-align: center;
      color: #9b9b9b;
      font-size: 0.33333rem;
      span {
      }
    }
  }
}
</style>
